<template>
  <div>
    <el-row>
      <el-col :span="5" style="margin-right: 40px">
        <el-card>
          <el-tree
            style="height: 635px"
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          />
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <el-form :model="formData" :inline="true">
            <el-form-item label="申请人">
              <el-input v-model="formData.applicant" />
            </el-form-item>
            <el-form-item label="部门">
              <el-input v-model="formData.department" />
            </el-form-item>
            <el-form-item label="创建时间">
              <el-input v-model="formData.createTime" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-form>
          <el-button> 加锁 </el-button>
          <el-button> 解锁 </el-button>
          <el-button> 导出 </el-button>
          <el-button> 查看日志 </el-button>
          <pure-table
            :data="tableData"
            :columns="columns"
            :default-sort="{ prop: 'date', order: 'ascending' }"
            @selection-change="handleSelectionChange"
            row-key="id"
            stripe
            :header-cell-style="{
              background: '#eff2fb',
              color: 'var(--el-text-color-primary)'
            }"
            style="margin-top: 30px"
          >
            <template #operation="{ row }">
              <el-button link type="primary"> 加锁 </el-button>
              <el-button link type="primary">解锁</el-button>
            </template>
          </pure-table>
          <el-pagination
            class="pagination"
            :current-page="listPageObj.currentPage"
            :page-size="listPageObj.pageSize"
            :page-sizes="[10, 50, 100, 200]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listPageObj.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import type { TabsPaneContext, ElTree } from "element-plus";

interface Tree {
  label: string;
  children?: Tree[];
}
interface Table {
  id: number;
  applicant: string;
  department: string;
  creator: string;
  createTime: string;
}
const handleNodeClick = (data: Tree) => {
  console.log(data);
};
const multipleSelection = ref([]);
const treeData: Tree[] = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1"
          }
        ]
      }
    ]
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1"
          }
        ]
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1"
          }
        ]
      }
    ]
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1"
          }
        ]
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1"
          }
        ]
      }
    ]
  }
];
const tableData: Table[] = [
  {
    id: 1,
    applicant: "阿海",
    department: "孔明",
    creator: "创建人",
    createTime: "xxxx"
  }
];

const columns: TableColumnList = [
  {
    type: "selection",
    align: "left"
  },
  {
    label: "申请人",
    prop: "applicant"
  },
  {
    label: "部门",
    prop: "department"
  },
  {
    label: "创建人",
    prop: "creator"
  },
  {
    label: "创建时间",
    prop: "createTime",
    sortable: true
  },
  {
    label: "操作",
    width: "120",
    fixed: "right",
    slot: "operation"
  }
];

const defaultProps = {
  children: "children",
  label: "label"
};
const formData = reactive({
  applicant: "",
  department: "",
  createTime: ""
});
const listPageObj = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});
function handleSizeChange(val: number) {
  console.log(`${val} items per page`);
}
function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`);
}
const handleSelectionChange = val => {
  multipleSelection.value = val;
};
</script>

<style scoped>
.pagination {
  justify-content: flex-end !important;
  margin-top: 30px;
}
</style>
